<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<fieldset class="form-container " style="width:80%;margin-left:5%;"> 
    <c:if test="${contrat.modelPaie==null}">
        <div class="error message">
            <h3>Message</h3>
            <p>Veuillez attribuer un mod&egrave;le de bulletin</p>
        </div>
    </c:if>

    <legend class="form-title"><h2>Ajouter un bulletin de paie entre ${contrat.adherent.nomPrenom} et ${contrat.employe.nom}&nbsp;${contrat.employe.prenom}</h2></legend>
    <fieldset style="float: left;position: relative;margin-left:4%;">
        <legend class="form-title">L'adh&eacute;rent</legend>
        <table >
            <tbody>
                <tr><td style="width : 35%">Nom Pr&eacute;nom :</td><td>${contrat.adherent.nomPrenom}</td></tr>

                <tr class="alt"><td>Adresse :</td><td>${contrat.adherent.adresse}<br/>
                        ${contrat.adherent.complementAdresse}<br/>
                        ${contrat.adherent.codePostal}- ${contrat.adherent.ville}</td></tr>
                <tr class="alt"><td>T&eacute;l&eacute;phone :</td>
                    <td>${contrat.adherent.telephone}</td></tr>
                <tr><td>Mobile :</td>
                    <td>${contrat.adherent.mobile}</td></tr>

                <tr  class="alt"><td>Num&eacute;ro Urssaf :</td><td>${contrat.adherent.numUrssaf}</td></tr>
                <tr ><td>Num&eacutero Siret :</td><td>${contrat.adherent.numSiret}</td></tr>
            </tbody>
        </table>
    </fieldset>
    <fieldset style="float: left;position: relative;margin-left: 10%;">
        <legend class="form-title">L'employ&eacute;</legend>
        <table>
            <tbody>
                <tr><td style="width : 40%">Nom Pr&eacute;nom :</td><td>${contrat.employe.nom}&nbsp;${contrat.employe.prenom}</td></tr>
                <tr class="alt"><td >Nom jeune fille :</td><td>${contrat.employe.nomJeuneFille}</td></tr>

                <tr><td>Adresse :</td><td>${contrat.employe.adresse}<br/>
                        ${contrat.employe.complementAdresse}<br/>
                        ${contrat.employe.codePostal}- ${contrat.employe.ville}</td></tr>
                <tr class="alt"><td>Num&eacute;ro de t&eacute;l&eacute;phone :</td>
                    <td>${contrat.employe.telephone}</td></tr>
                <tr ><td>Mobile :</td>
                    <td>${contrat.employe.mobile}</td></tr>

                <tr class="alt"><td>Num&eacute;ro S&eacute;curit&eacute; social:</td><td>${contrat.employe.numSecu}</td></tr>

            </tbody>
        </table>
    </fieldset>


    <form:form id="form_782213"    style=" clear: left;" method="post" action="/bulletin/add.do" modelAttribute="bulletin" autocomplete="on">
        <form:errors path="*" cssClass="errorblock" element="div"></form:errors>
        <form:hidden path="id"/>
        <input type="hidden" name="contrat.id" value="${contrat.id}"/>
        <input type="hidden" name="modelPaie.id" value="${contrat.modelPaie.id}"/>
        <div style="float: left;position: relative;">
            <div class="form-title">Periode du bulletin </div>
            <form:input class="form-field datepicker" type="text" path="periode" />
        </div>

        <div style="clear: left;">
            <table name = "ligneBulletinPaie" id="ligneBulletinPaie">
            </table>
        </div>
        <div style="float: left;position: relative;">
            <div class="form-title">A d&eacute;duire </div>
            <form:input class="form-field numeric" type="text" path="aDeduire" />
        </div>
        <div style="float: left;position: relative;">
            <div class="form-title">A payer </div>
            <form:input class="form-field numeric" type="text" path="aPayer" />
        </div>

        <div class="submit-container" style=" clear: left;">
            <form:button class="submit-button" type="submit" >Enregistrer</form:button>
            <a href="/bulletin/index.do" class="submit-button">Annuler</a>

            </div>
    </form:form>
</fieldset>

<script id="jsSource" type="text/javascript">
    var nbGroup = 0;
    $(function() {

        $('#periode').monthpicker();
        // Initialize appendGrid
      
        $('#ligneBulletinPaie').appendGridLigneHoraire({
            caption: '',
            hideButtons: {
                moveUp: true,
                moveDown: true,
                insert: true
            },
            hideRowNumColumn: true,
            initRows: 1,
            columns: [
                {name: 'id', display: 'Id', type: 'hidden'},
                {name: 'nom', display: 'Nom de la ligne', type: 'text', ctrlCss: {width: '200px'}},
                {name: 'nombre', display: 'Nombre', type: 'text', ctrlCss: {width: '75px'}, ctrlClass: 'numeric'},
                {name: 'tauxHoraire', display: 'Taux Horaire', type: 'text', ctrlCss: {width: '75px'}}

            ], idPrefix: 'ligneBulletinPaieModele[0]'

        });
        var data = []
    <c:choose>
        <c:when test="${bulletin.ligneHoraire.isEmpty()}">
        data = [{id: ' ', nom: 'Salaire de Base Heure effectuées', nombre: '', tauxHoraire: '${contrat.salaireBase}'}];
        </c:when>
        <c:when test="${!bulletin.ligneHoraire.isEmpty()}">
        data = [
            <c:forEach var="ligne" items="${bulletin.ligneHoraire}" varStatus="statusL">
                <c:choose>
                    <c:when test="${statusL.index==bulletin.ligneHoraire.size()-1}">
        {id: '${ligne.id} ', nom: '${ligne.nom}', nombre: '${ligne.nombre}', tauxHoraire: '${ligne.tauxHoraire}'}
                    </c:when>
                    <c:otherwise>
        {id: '${ligne.id} ', nom: '${ligne.nom}', nombre: '${ligne.nombre}', tauxHoraire: '${ligne.tauxHoraire}'},</c:otherwise>
                </c:choose>
            </c:forEach>
        ]
        </c:when>

    </c:choose>

        $('#ligneBulletinPaie').appendGridLigneHoraire('load', data);
        $('.numeric').numeric(".");
    });


</script>
